<template>
  <view class="content">
    <view class="logoArea">
      <view :class="boxClass" @click="changeShowPopup">
        <view v-if="!endRequest" class="boxIn">?</view>
        <view v-else class="boxIn">
          <image class="logo" :src="`/static/images/${resultSport.name}.png`" />
          <!-- <view class="firstTitle">{{ resultSport.title }}</view> -->
          <!-- <view class="secondTitle">{{ resultSport.name }}</view> -->
        </view>
      </view>
    </view>
    <fui-animation :duration="2500" :styles="footerStyle" :animationType="['slide-bottom']" :show="endRequest">
      <view class="sportTitle">{{ resultSport.title }}</view>
      <text class="sportContent">{{ resultSport.content }}</text>
    </fui-animation>
    <fui-bottom-popup :show="showPopup" @close="changeShowPopup">
      <view class="fui-custom__wrap"> 请输入身体指标 </view>
      <fui-input type="number" label="身高" borderTop placeholder="请输入身高" v-model="bodyIndex.height"></fui-input>
      <fui-input type="number" label="体重" borderTop placeholder="请输入体重" v-model="bodyIndex.weight"></fui-input>
      <fui-input type="number" label="肺活量" borderTop placeholder="请输入肺活量" v-model="bodyIndex.lungCapacity"></fui-input>
      <fui-input type="number" label="红细胞数" borderTop placeholder="请输入红细胞数" v-model="bodyIndex.redBloodCells"></fui-input>
      <fuiButton style="margin: 100rpx 0" @click="getSport">开始预测</fuiButton>
    </fui-bottom-popup>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import fuiButton from "@/components/firstui/fui-button/fui-button.vue";
import fuiBottomPopup from "@/components/firstui/fui-bottom-popup/fui-bottom-popup.vue";
import fuiInput from "@/components/firstui/fui-input/fui-input.vue";
import fuiAnimation from "@/components/firstui/fui-animation/fui-animation.vue";
import { BodyIndex } from "@/entity/interface/bodyIndex.interface";
import { resultDic, resultContent } from "./data";
const showPopup = ref(false);
const changeShowPopup = () => (showPopup.value = !showPopup.value);
const boxClass = ref("box");
const changeBoxClass = (className: string) => {
  boxClass.value = className;
};
const bodyIndex = reactive<BodyIndex>({
  height: null,
  weight: null,
  lungCapacity: null,
  redBloodCells: null,
});
const resultSport = reactive({
  name: "",
  title: "",
  content: "",
});
const endRequest = ref(false);
const getSport = () => {
  let randomTime = Math.ceil(Math.random() * 3000);
  let timer0 = setTimeout(() => {
    changeShowPopup();
    endRequest.value = false;
    changeBoxClass("boxTrans");
    clearTimeout(timer0);
  }, 0);
  let timer1 = setTimeout(() => {
    changeBoxClass("boxActive");
    clearTimeout(timer1);
  }, 1500);
  let timer4 = setTimeout(() => {
    endRequest.value = true;
    const randomList = ["wushu", "weightlifting", "volleyball", "swim", "run", "bike"];
    const result = randomList[Math.floor(Math.random() * randomList.length)];
    resultSport.name = result;
    resultSport.title = resultDic[result];
    resultSport.content = resultContent[result];
    clearTimeout(timer4);
  }, 3000 + randomTime);
  let timer2 = setTimeout(() => {
    changeBoxClass("boxTrans");
    clearTimeout(timer2);
  }, 3500 + randomTime);
  let timer3 = setTimeout(() => {
    changeBoxClass("boxEnd");
    clearTimeout(timer3);
  }, 5000 + randomTime);
};
const footerStyle = {
  width: "710rpx",
  margin: "10vh 20rpx",
};
</script>

<style>
.content {
  background-color: #0c1124;
  display: flex;
  align-items: center;
  flex-direction: column;
  min-height: calc(100vh - 120rpx);
  width: 100vw;
}
.logo {
  width: 300rpx;
  height: 300rpx;
  margin: 40rpx;
}
.firstTitle {
  color: white;
  font-size: 50rpx;
  width: 100%;
  text-align: center;
  height: 100rpx;
  line-height: 100rpx;
  font-weight: bold;
}
.secondTitle {
  color: white;
  font-size: 40rpx;
  width: 100%;
  text-align: center;
  height: 80rpx;
  line-height: 80rpx;
  font-weight: bold;
}
.footer {
  width: 710rpx;
  color: white;
  margin: 10vh 20rpx;
}
.sportTitle {
  color: white;
  font-size: 60rpx;
  width: 100%;
  text-align: left;
  height: 120rpx;
  line-height: 120rpx;
  font-weight: bold;
}
.sportContent {
  color: white;
  font-size: 28rpx;
  width: 100%;
  line-height: 35rpx;
  letter-spacing: 3rpx;
}
.fui-custom__wrap {
  width: 750rpx;
  height: 100rpx;
  padding: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  position: relative;
  width: 500rpx;
  height: 700rpx;
  border-radius: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin-top: 100rpx;
  background-color: #000;
  z-index: 10;
  animation: onlyRoute 4s infinite linear;
}
.boxActive {
  position: relative;
  width: 500rpx;
  height: 700rpx;
  border-radius: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin-top: 100rpx;
  background-color: #000;
  z-index: 10;
  animation: upAndDownAndRoute 0.01s infinite;
}
.boxTrans {
  position: relative;
  width: 500rpx;
  height: 700rpx;
  border-radius: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin-top: 100rpx;
  background-color: #000;
  z-index: 10;
  animation: upAndDownAndRoute 0.4s infinite;
}
.boxEnd {
  position: relative;
  width: 500rpx;
  height: 700rpx;
  border-radius: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #000;
  margin-top: 100rpx;
  z-index: 10;
  animation: noAni 4s infinite linear;
}
.boxIn {
  width: 480rpx;
  height: 680rpx;
  position: absolute;
  left: 10rpx;
  top: 10rpx;
  color: white;
  font-size: 250rpx;
  line-height: 680rpx;
  text-align: center;
  background-color: #0c1124;
  border-radius: 10rpx;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
}
.box::before,
.boxTrans::before,
.boxEnd::before,
.boxActive::before {
  content: "";
  position: absolute;
  width: 2000rpx;
  height: 2000rpx;
  background-image: conic-gradient(transparent, transparent, transparent, #d400d4);
  animation: borderRoute 4s infinite linear -2s;
  z-index: 100;
}
.box::after,
.boxTrans::after,
.boxEnd::after,
.boxActive::after {
  content: "";
  position: absolute;
  width: 2000rpx;
  height: 2000rpx;
  background-image: conic-gradient(transparent, transparent, transparent, #00ccff);
  animation: borderRoute 4s infinite linear;
  z-index: 100;
}

@keyframes borderRoute {
  0% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(180deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
.logoArea {
  width: 500rpx;
  height: 900rpx;
}
@keyframes onlyRoute {
  0% {
    margin-top: 100rpx;
    transform: rotateY(0deg);
  }
  50% {
    margin-top: 200rpx;
    transform: rotateY(180deg);
  }
  100% {
    margin-top: 100rpx;
    transform: rotateY(360deg);
  }
}
@keyframes upAndDownAndRoute {
  0% {
    margin-top: 100rpx;
    transform: rotateY(0deg);
  }
  50% {
    margin-top: 100rpx;
    transform: rotateY(180deg);
  }
  100% {
    margin-top: 100rpx;
    transform: rotateY(0deg);
  }
}
@keyframes upAndDown {
  0% {
    margin-top: 100rpx;
  }
  50% {
    margin-top: 200rpx;
  }
  100% {
    margin-top: 100rpx;
  }
}
</style>
